<!-- 部门管理 -->
<style lang="less" scoped>
.department {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 200px;
    margin-left: 50px;
    display: inline-block;
  }
}
.width90 {
  width: 95%;
}
.redStar {
  color: red;
  font-size: 22px;
}
.ivu-form-item {
  margin-bottom: 20px;
}
</style>


<template>
  <div class="department">
    <Card :bordered="false">
      <p slot="title"
         class="white">系统管理 > <span class="select-font">河长办管理</span>
      </p>
      <div>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 :maxlength="20"
                 style="width:200px;"
                 placeholder="请输入部门名称"></Input>
        </Form>
        <area-select @getData="getAreaData"
                     class="smallArr"></area-select>
        <Button type="info"
                style="margin-left:50px"
                @click="submitSearch('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="departmentData"
             @on-selection-change="showSelect"
             :columns="theadArr"
             stripe></Table>
      <Page class="pull-right"
            :total="waterRecordPage.total"
            :current="waterRecordPage.current"
            :page-size="waterRecordPage.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <Modal v-model="departmentModal"
             width="700"
             :mask-closable="false">
        <div slot="header">{{updateTitle}}</div>
        <Form :model="modelItem"
              :rules="rules"
              :label-width="100">
          <Form-item label="河长办名称"
                     prop="dep_name">
            <Input v-model="modelItem.dep_name"
                   :maxlength="16"
                   :readonly="btnChange"
                   placeholder="请输入部门名称"></Input>
          </Form-item>
          <Form-item label="河长办编号"
                     prop="dep_code">
            <Input v-model="modelItem.dep_code"
                   :maxlength="16"
                   :readonly="btnChange"
                   placeholder="请输入部门编号"></Input>
          </Form-item>
          <Form-item label="部门类型"
                     prop="type">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.type">
              <Option value="0">河长办</Option>
              <Option value="1">职能部门</Option>
            </Select>

          </Form-item>
          <Form-item label="部门简称"
                     prop="short_name">
            <Input v-model="modelItem.short_name"
                   :maxlength="16"
                   placeholder="请输入部门简称"></Input>
          </Form-item>
          <Form-item label="部门级别"
                     prop="level">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.level"
                    on-change="changeDepLevel">
              <Option value="1">1级</Option>
              <Option value="2">2级</Option>
              <Option value="3">3级</Option>
              <Option value="4">4级</Option>
              <Option value="5">5级</Option>
            </Select>

          </Form-item>
          <Form-item label="部门等级1"
                     prop="level1">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.level1">
              <Option v-for="item in level1Data"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="部门等级2"
                     v-show="L1"
                     prop="level2">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.level2">
              <Option v-for="item in level2Data"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="部门等级3"
                     v-show="L2"
                     prop="level3">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.level3">
              <Option v-for="item in level3Data"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="部门等级4"
                     v-show="L3"
                     prop="level4">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.level4">
              <Option v-for="item in level4Data"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="所属区"
                     prop="area">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.area">
              <Option v-for="item in areaArr1"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="所属镇"
                     prop="town">
            <Select clearable
                    :disabled="!btnSave"
                    v-model="modelItem.town">
              <Option v-for="item in townArr"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="河长办电话"
                     prop="telephone">
            <Input v-model="modelItem.telephone"
                   :maxlength="11"
                   placeholder="请输入河长办电话"></Input>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button v-if="btnSave"
                  type="primary"
                  @click="ok">保存</Button>
          <Button v-if="btnChange"
                  type="primary"
                  @click="changeDepartment">修改</Button>
          <Button @click="departmentModal = false">取消</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import areaSelect from 'public/areaSelect';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  components: {
    'area-select': areaSelect,
  },
  data() {
    return {
      urlDepartmentList: '/sys/department/list',
      urlDepartmentNew: '/sys/department/new',
      urlDepartmentEdit: '/sys/department/edit',
      urlDepartmentDis: '/sys/department/distinct',
      urlAddressDis: '/law/city/distinct',
      departmentData: [],
      rules: {
        dep_name: [
          { required: true, message: '部门名不能为空', trigger: 'blur' },
        ],
        dep_code: [
          { required: true, message: '部门编号不能为空', trigger: 'blur' },
        ],
        short_name: [
          { required: true, message: '部门简称不能为空', trigger: 'blur' },
        ],
      },
      formItem: {
        name: '',
        level: '',
      },
      levelArr: [
        {
          name: '市级',
          value: 1,
        },
        {
          name: '区级',
          value: 2,
        },
        {
          name: '镇级',
          value: 3,
        },
        {
          name: '村级',
          value: 4,
        },
      ],
      theadArr: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '部门名称',
          width: 200,
          key: 'dep_name',
          fixed: 'left',
        },
        {
          title: '部门简称',
          width: 120,
          key: 'short_name',
        },
        {
          title: '部门编号',
          width: 200,
          key: 'dep_code',
        },
        {
          title: '所属区',
          width: 120,
          key: 'area',
        },
        {
          title: '所属镇',
          width: 120,
          key: 'town',
        },
        {
          title: '部门电话',
          width: 150,
          key: 'telephone',
        },
        {
          title: '部门级别',
          width: 120,
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '部门级别',
                data: [
                  { value: 'all', name: '全部' },
                  { value: 1, name: '市级' },
                  { value: 2, name: '区级' },
                  { value: 3, name: '镇级' },
                  { value: 4, name: '村级' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.level = data;
                    this.submitSearch();
                  } else {
                    this.formItem.level = '';
                    this.submitSearch();
                  }
                },
              },
            });
          },
          render: (h, params) => {
            if (params.row.level === 1) {
              return h('div', {}, '市级');
            } else if (params.row.level === 2) {
              return h('div', {}, '区级');
            } else if (params.row.level === 3) {
              return h('div', {}, '镇级');
            } else if (params.row.level === 4) {
              return h('div', {}, '村级');
            }
          },
        },
        {
          title: '部门等级1',
          width: 200,
          key: 'level1',
        },
        {
          title: '部门等级2',
          width: 200,
          key: 'level2',
        },
        {
          title: '部门等级3',
          width: 200,
          key: 'level3',
        },
        {
          title: '部门等级4',
          width: 200,
          key: 'level4',
        },
        {
          title: '部门等级5',
          width: 200,
          key: 'level5',
        },
        {
          title: '用户操作',
          align: 'center',
          width: 200,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row, params.index);
                    },
                  },
                },
                '编辑'
              ),
            ]);
          },
        },
      ],
      waterRecordPage: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      actionPage: '1',
      area: {},
      departmentModal: false,
      btnChange: false,
      btnSave: false,
      modelItem: {},
      updateTitle: '',
      modal2: false,
      level1Data: [],
      level2Data: [],
      level3Data: [],
      level4Data: [],
      level5Data: [],
      areaArr1: [],
      townArr: [],
      L1: true,
      L2: true,
      L3: true,
    };
  },
  methods: {
    submitSearch(page = 1) {
      let params = {
        data: {
          order: { _id: -1 },
          searchValue: {
            type: '0',
          },
          pageSize: this.waterRecordPage.pageSize,
          page,
        },
        url: this.urlDepartmentList,
        token: storage.session.get('token'),
        success: res => {
          this.departmentData = res.data.result.result;
          this.waterRecordPage.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.dep_name = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.level !== '') {
        params.data.searchValue.level = this.formItem.level;
      }
      if (this.area !== undefined && this.area.name !== undefined) {
        if (this.area.level == '2') {
          params.data.searchValue.area = this.area.name;
        } else if (this.area.level == '3') {
          params.data.searchValue.town = this.area.name;
        }
      }
      ajaxPost(params);
    },
    getAreaData(data) {
      this.area = data;
    },
    changePage(page) {
      this.submitSearch(page);
      this.actionPage = page;
    },
    addDepartment() {
      this.departmentModal = true;
      this.btnChange = false;
      this.btnSave = true;
      this.modelItem = {
        dep_name: '',
        dep_code: '',
        level: '',
        level1: '',
        level2: '',
        level3: '',
        level4: '',
        level5: '',
        area: '',
        town: '',
        telephone: '',
        short_name: '',
        type: '',
      };

      this.updateTitle = '新增部门';
    },
    ok() {
      let that = this;
      let params = {};
      params.data = this.modelItem;
      params.url = this.urlDepartmentNew;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '新增成功',
          });
          that.departmentModal = false;
          that.selectData = [];
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    edit(row, index) {
      this.updateTitle = '编辑河长办';
      this.departmentModal = true;
      this.btnChange = true;
      this.btnSave = false;
      this.modelItem.dep_name = row.dep_name;
      this.modelItem.dep_code = row.dep_code;
      this.modelItem.type = row.type;
      this.modelItem.level = row.level;
      this.modelItem.level1 = row.level1;
      this.modelItem.level2 = row.level2;
      this.modelItem.level3 = row.level3;
      this.modelItem.level4 = row.level4;
      this.modelItem.area = row.area;
      this.modelItem.town = row.town;
      this.modelItem.telephone = row.telephone;
      this.modelItem.short_name = row.short_name;
      this.modelItem._id = row._id;
    },
    changeDepartment() {
      let that = this;
      let params = {};
      params.data = this.modelItem;
      console.log(params.data);
      params.url = this.urlDepartmentEdit;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '修改成功',
          });
          that.departmentModal = false;
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    getDep(level, type) {
      let params = {
        data: {
          fieldName: 'dep_name',
          type: 'String',
          searchValue: {
            type,
          },
        },
        url: this.urlDepartmentDis,
        token: storage.session.get('token'),
        success: res => {
          this.level1Data = res.data.result;
        },
      };
      if (level == '2') {
        params.data.searchValue.level = 1;
        params.success = res => {
          this.L1 = true;
          this.L2 = false;
          this.L3 = false;
          this.level1Data = res.data.result;
          this.level2Data = [this.modelItem.dep_name];
          this.modelItem.level2 = this.modelItem.dep_name;
        };
      } else if (level == '3') {
        this.getDep(1, this.modelItem.type);
        params.data.searchValue.level1 = this.modelItem.level1;
        params.data.searchValue.level = 2;
        params.success = res => {
          this.L1 = true;
          this.L2 = true;
          this.L3 = false;
          this.level2Data = res.data.result;
          this.level3Data = [this.modelItem.dep_name];
          this.modelItem.level3 = this.modelItem.dep_name;
        };
      } else if (level == '4') {
        this.getDep(1, this.modelItem.type);
        params.data.searchValue.level = 2;
        params.success = res => {
          this.level2Data = res.data.result;
        };
        setTimeout(() => {
          params.data.searchValue.level2 = this.modelItem.level2;
          params.data.searchValue.level = 3;
          params.success = res => {
            this.L1 = true;
            this.L2 = true;
            this.L3 = true;
            this.level3Data = res.data.result;
            this.level4Data = [this.modelItem.dep_name];
            this.modelItem.level4 = this.modelItem.dep_name;
          };
          ajaxPost(params);
        }, 200);
      }
      ajaxPost(params);
    },
    getDepAddress(type) {
      let params = {
        data: {
          fieldName: 'name',
          type: 'String',
          searchValue: {},
        },
        token: storage.session.get('token'),
        url: this.urlAddressDis,
        success: res => {},
      };
      if (type == 2) {
        params.data.searchValue.level = '2';
        params.success = res => {
          this.areaArr1 = res.data.result;
        };
      } else if (type == 3) {
        params.data.searchValue.level = '3';
        params.data.searchValue.level2 = this.modelItem.area;
        params.success = res => {
          this.townArr = res.data.result;
        };
      }
      ajaxPost(params);
    },
    checkName(data) {
      let params = {
        data: {
          searchValue: {},
        },
        url: this.urlDepartmentList,
        token: storage.session.get('token'),
        success: res => {
          if (parseInt(res.data.result.totalSize) !== 0) {
            this.$Message.warning({
              content: '已被注册',
            });
          } else {
            this.$Message.success({
              content: '可用',
            });
          }
        },
      };
      if (data === 'name') {
        if (this.modelItem.dep_name === '') {
          return;
        }
        params.data.searchValue.dep_name = this.modelItem.dep_name;
      }
      if (data === 'code') {
        if (this.modelItem.dep_code === '') {
          return;
        }
        params.data.searchValue.dep_code = this.modelItem.dep_code;
      }
      ajaxPost(params);
    },
    showSelect() {}
  },
  mounted() {
    this.submitSearch('1', '0');
    this.getDepAddress(2);
  },
  watch: {
    'modelItem.level'(data) {
      if (data == '1') {
        this.level1Data = [this.modelItem.dep_name];
        this.modelItem.level1 = this.modelItem.dep_name;
      } else {
        this.getDep(data, this.modelItem.type);
      }
    },
    'modelItem.area'() {
      this.getDepAddress(3);
    },
    'modelItem.type'(data) {
      this.getDep(this.modelItem.level, data);
    },
  },
};
</script>
